import React from "react";
import { Dropdown, Button } from "antd";
import type { MenuProps } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../store";
import { LoginQuitActionCreator } from "../../store/user/userActions";
export const UserInfo = () => {
  const avator = useSelector((state: RootState) => state.user.avator);
  const nickname = useSelector((state: RootState) => state.user.nickname);
  const dispatch = useDispatch();
  const items = [
    {
      key: "1",
      label: "个人中心",
    },
    {
      key: "2",
      label: "修改密码",
    },
    {
      key: "3",
      label: "更换头像",
    },
    {
      key: "4",
      label: "退出登录",
    },
  ];
  const onClick: MenuProps["onClick"] = ({ key }) => {
    switch (key) {
      case "1":
      case "2":
      case "3":
        return;
      case "4":
        dispatch(LoginQuitActionCreator());
    }
  };
  return (
    <div>
      <img src={avator} style={{ marginRight: 10 }} alt="" />
      <Dropdown
        menu={{ items, onClick }}
        placement="bottom"
        arrow={{ pointAtCenter: true }}
      >
        <Button>{nickname}</Button>
      </Dropdown>
    </div>
  );
};
